<template>
  <a-card
    title="审批记录"
    style="margin-top: 10px;"
    :loading="timelineLoading"
  >
    <a-timeline v-if="timeline && timeline.length > 0" labelPosition="relative">
      <template v-for="item of timeline" :key="item.timeLineId">
        <a-timeline-item :label="item.operateTime">
          <a-list-item-meta>
            <template #title>
              {{ item.nodeName }} {{ item.type }}
            </template>
            <template #description>
              {{ item.description }}
            </template>
            <template #avatar>
              <a-avatar v-if="item.userName" shape="square" :style="{ backgroundColor: '#14a9f8' }">
                {{ item.userName }}
              </a-avatar>
            </template>
          </a-list-item-meta>
        </a-timeline-item>
      </template>
    </a-timeline>
    <a-empty v-else />
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { history } from '@/api/flow/timeline';

const props = defineProps({
  processInstanceId: {
    type: String,
    default: () => {
      return '';
    }
  }
});

const timelineLoading = ref(false);

const timeline = ref();

onMounted(() => {
  timelineLoading.value = true;
  history(props.processInstanceId).then(res => {
    timeline.value = res.data;
  }).finally(() => {
    timelineLoading.value = false;
  });
});
</script>

<script lang="ts">
export default {
  name: 'CardHistory'
};
</script>

<style scoped lang="less">

</style>